<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作 ：针对元素增删改操作 
		append()          功能：在匹配元素集合种所有元素的内部末尾插入内容
		prepend()         功能：在匹配元素集合种所有元素的内部开头插入内容
		
		after()           功能：在匹配元素集合种所有元素的后面插入内容
		before()          功能：在匹配元素集合种所有元素的前面插入内容
		
		remove()		  功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
		empty()			  功能：清空匹配元素集合中所有的元素的内容【盒子模型不删掉】
		
		replaceWith()
		
		-->
		<style>
			 body{
				 margin: 20px;
			 }
			 button{
				 margin: 5px;
				 padding: 10px 15px;
				 cursor: pointer;
			 }
			 #target{
				 border: 1px solid #a8a8a8;
				 padding: 10px;
				 margin-top: 10px;
				 margin-left: 5px;
				 border-radius: 5px;
			 }
			.boss{
				 width: 300px;
				 height: 300px;
				 border-radius: 50%;
				 background-color: #00f;
				 background-image: url(../img/1.gif);
				 color: transparent;
			 }
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html: 7个按钮  div包含p包含：目标元素的初始段落  id="target"
						   div包含p包含：插入新元素的初始段落  id="newElement"隐藏
			 css：按钮：外边距 5px，内边距：10px 15px  鼠标移动上：手指显示
				  body：外边距20px 
				  #target：1像素边框、内边距：10px、上外边距：10px
			 引入JQ
		 -->
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<!-- 目标显示区域 -->
		<div id="target">
			<p>目标元素的初始段落</p>
		</div>
		<!-- 用于插入跟替换的区域 -->
		<div id="newElement" style="display: none;">
			<p class="nep">插入新元素的初始段落</p>
		</div>
		<script>
			/* 1.点击 内部未尾插入元素 按钮 p文本后面追加新元素中包含内容操作 */
			$("#appendBtn").click(function(){
				// 效果：点击按钮  追加新元素--自带内容
				//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone() 创建一个元素的副本，副本包含内部元素以及所有属性和属性值
				//1.2自带属性和属性值：隐藏----改成显示
				cpe.css("display","block");
				//1.3 将复制出来的新元素，追加给当前元素上
				$("#target").append(cpe)
			});
			/* 2.点击 内部开头插入元素 按钮 p文本后面追加新元素中包含内容操作 */
			$("#prependBtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.css("display","block");
				$("#target").prepend(cpe)
			});
			/* 3.点击 外部插入后边元素 按钮 p文本后面追加新元素中包含内容操作 */
			$("#afterBtn").click(function(){
				var cpe1=$("#newElement").clone();
				cpe1.addClass("boss");
				$("#target").after(cpe1)
			});
			/* 4.点击 外部前边插入元素 按钮 生成 圆形，保留背景色，不需要文本 背景图 300*300 */
			$("#beforeBtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.css({"display":"block",
						 "width":"300px",
						 "height":"300px",
						 "border-radius":"50%",
						 "background-color":"#ff0",
						 "background-image":"url(../img/1.gif)",
						 "color":"transparent"
						});
				$("#target").before(cpe)
			});
			/* 5.点击 删除元素  按钮 页面上所有元素包含子元素全部删除【盒子模型删】 */
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			/* 6.点击 清空元素  按钮 页面上所有元素内容全部删除【盒子模型不删】 */
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			/* 7.点击 替换元素 按钮 页面上目标元素替换为新元素 */
			$("#replaceBtn").click(function(){
				//克隆 新元素 #newElement【父子级】
				var c=$("#newElement").clone().css("display","block");
				// 替换 新元素 替换 目标元素
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>
